<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>照片特效</title>
    <style>
        body{
            background-color: black;
        }
        .imgP{
            width: 800px;
            margin: 80px auto;
            perspective: 800px;
        }
        img{
            width: 120px;
            height:120px;
            float: left;
        }
        .btnDiv{
            clear: both;
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        #btn{
            margin-top: 50px;
            text-align: center;
            padding: 0 30px;
            font: 14px/40px "微软雅黑";
            background-color: #08ba3a;
            color: white;
            box-shadow: 2px 2px 5px white;
        }
    </style>
</head>
<body>
<div class="imgP">
    <img src="img/1_03.png">
    <img src="img/culture_05.png">
    <img src="img/1_03.png">
    <img src="img/culture_05.png">
    <img src="img/1_03.png">
    <img src="img/1_03.png">
    <img src="img/1_03.png">
    <img src="img/culture_05.png">
    <img src="img/1_03.png">
    <img src="img/1_03.png">
    <img src="img/culture_05.png">
    <img src="img/fish2_02.png">
    <img src="img/1_03.png">
    <img src="img/1_03.png">
    <img src="img/culture_05.png">
    <img src="img/1_03.png">
    <img src="img/fish2_02.png">
    <img src="img/culture_05.png">
    <img src="img/1_03.png">
    <img src="img/1_03.png">
    <img src="img/culture_05.png">
    <img src="img/1_03.png">
    <img src="img/1_03.png">
    <img src="img/culture_05.png">
    <img src="img/1_03.png">
    <img src="img/fish2_02.png">
    <img src="img/culture_05.png">
    <img src="img/1_03.png">
    <img src="img/fish2_02.png">
</div>
<div class="btnDiv"><input id="btn" type="button" value="点击"></div>
<script>
    /*照片移动*/
    function motion(obj,time,doFn,callBack) {
        obj.style.transition=time;
        doFn.call(obj);
        var call=false;
        obj.addEventListener('transitionend',function (g) {
            if(!call){
                callBack&&callBack.call(obj);
                call=true;
            }
        },false);
    }

    var btn=document.getElementById("btn");
    var imgs=document.querySelectorAll('img');
    var on=true;
    btn.onclick=function () {
        if(!on){
            return;
        }
        on=false;
        var endNum=0;
        var allNum=0;
        for(var i=0;i<imgs.length;i++){
            (function(i) {
                setTimeout(function () {
                    motion(imgs[i],"10ms",function () {
                        this.style.transform="scale(0)";
                    },function () {
                        motion(this,"1s",function () {
                            this.style.transform="scale(1)";
                            this.style.opacity=0;
                        },function () {
                            endNum++;
                            if(endNum==imgs.length){
                                toBig();
                            }
                        });
                    });
                },Math.random()*1000);
            })(i);
            function toBig() {
                for(var i=0;i<imgs.length;i++){
                    imgs[i].style.transition='';
                    imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)';
                    (function (i) {
                        setTimeout(function () {
                            motion(imgs[i],'2S',function () {
                                this.style.opacity=1;
                                var flag;
                                if(i%2==0){
                                    flag="-";
                                }else {
                                    flag="+";
                                }
                                this.style.transform='rotateY('+flag+'360deg) translateZ(0)';
                            },function () {
                                allNum++;
                                if(allNum==imgs.length){
                                    on=true;
                                }
                            })
                        },Math.random()*1000)
                    })(i);
                }
            }
        }
    };
</script>
</body>
</html>
